﻿@{
    Layout = null;
   
}
<script src="~/Scripts/MGJJS/Product/ProductList.js"></script>
<link href="~/Scripts/Bootstrap/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<script src="~/Scripts/Bootstrap/js/bootstrap-datepicker.js"></script>

<script>
    function showPanel(obj) {
        $(obj).parent().parent().nextAll('.panel-collapse').toggle();
    }
</script>
@*产品列表*@

<style>
    .ProductsTd {
        padding: 5px;
        display: flex;
        align-items: center;
        text-align:center;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }
    .imgBox {
        float: left;
        margin: 3px;
        height: 55px;
        border: 1px solid rgba(120,130,140,.25);
        position:relative;
        width:62px;
        display:flex;
        justify-content:center;
        overflow:hidden;
        border-radius:4px;
    }
    .imgBox > img {
        width: 100%;
        /*max-width: 200px;*/
    }
    .ProductsTd >div {
        text-align:left;
    }
    .OperationTd{
        text-align:center;
    }
     .OperationTd > div {
        margin-bottom: 5px;
    }
</style>

<div class="mtlr15">
    <form id="SearchForm" role="form" onkeydown="if(event.keyCode==13){return false;}">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-8" style="padding:0">
                <button type="button" class="btn btn-success" onclick="$.MGJ.ProductList.Dialog_AddList()">
                    <i class="glyphicon glyphicon-plus-sign"></i>
                    新增
                </button>
                @*<button type="button" class="btn btn-success">
                        <i class="glyphicon glyphicon-arrow-down"></i>
                        导入excel
                    </button>
                    <button type="button" class="btn btn-success">
                        <i class="glyphicon glyphicon-arrow-up"></i>
                        导出excel
                    </button>*@
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4">
                <div class="input-group">
                    <div style="width:100%;display:none"></div>
                    <input id="EnterpriseName" name="EnterpriseName" type="text" class="form-control" placeholder="所属机构" onkeydown="if (event.keyCode == 13) { $.MGJ.ProductList.Ajax_GetProductList(1); }">
                    <span class="input-group-addon" onclick="$.MGJ.ProductList.Ajax_GetProductList(1);">
                        <span class="glyphicon glyphicon-search"></span>
                    </span>
                    <div class="input-group-btn" style="margin-left:1px;" onclick="detailSearch(this)">
                        <button type="button" class="btn btn-default" style="border: 1px solid transparent;">
                            更多搜索
                            <span class="caret"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="detail-search-con" style="display:none">


            <div class="row newrow">
                <div class="col-lg-1 col-md-1 col-sm-1 col-sm-2 text-right" style="padding:0">
                    创建时间
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-sm-3">
                    <input id="StartDate" type="text" name="StartDate" class="form-control" placeholder="创建时间" />
                </div>
                <div class="col-lg-1 col-md-1 col-sm-1 col-sm-2 text-right" style="padding:0">
                    产品名称
                </div>

                <div class="col-lg-2 col-md-2 col-sm-2 col-sm-2">
                    <input type="text" name="ProductName" class="form-control" placeholder="产品名称" />
                </div>


                <div class="col-lg-1 col-md-1 col-sm-1 text-right" style="padding:0">
                    分类
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-sm-2">
                    @Html.DropDownList("TypeId", null, new { @class = "form-control" })
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-sm-2 text-center">
                    <button type="button" class="btn btn-default" style="margin-left:23px;" onclick="$.MGJ.ProductList.Ajax_GetProductList(1);">
                        <span class="glyphicon glyphicon-search"></span>
                        搜索
                    </button>
                    <button type="reset" class="btn btn-default">
                        重置
                    </button>
                </div>

            </div>
        </div>
    </form>

    <div id="Table">
        <div class="overflow">
            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th width="15"><input type="checkbox" class="AllClickCheckbox"></th>
                        <th>产品</th>
                        <th>所属机构</th>
                        <th>类型</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="ProductData" style="display:none;" binding="{'pageId':'ProducctPager','pageCallback':'$.MGJ.ProductList.Ajax_GetProductList','emptyHtml':User_EmptyHtml}">
                    <tr>
                        <td width="15" style="vertical-align:middle" class="text-center"><input type="checkbox" class="AllClickChild"></td>
                        <td style="vertical-align:middle" class="ProductsTd">
                            <div class="imgBox">
                                <img binding="{'src':'ImageUrl1','srcHandle':$.MGJ.ProductList.Ajax_srcHandle}" onerror="this.src = '/Content/userImgs/Product/ProductNullImg.png'" />
                            </div>
                            <div @*style="color: #4397e6"*@>
                                <div binding="{'text':'ProductName'}"></div>
                                <div style="font-size:10px;">(<span binding="{'text':'ProductCode'}"></span>)</div>
                            </div>
                        </td>
                        <td style="vertical-align:middle" class="text-center" binding="{'text':'EnterpriseName','title':'EnterpriseName'}"></td>
                        <td style="vertical-align:middle" class="text-center" binding="{'text':'TypeName'}"></td>
                        <td style="vertical-align:middle" class="text-center" binding="{'text':'CreateDate','textHandle':'datetime_Date'}">1000</td>
                        <td class="OperationTd">
                            @*<div>
                                    <button class="btn btn-success" binding="{'productId':'Id','templetid':'templetid','PName':'ProductName'}" onclick=" $.MGJ.ProductList.Dialog_NodeConfiguration(this)">溯源节点配置<span style="display:none" class="site-menu-title">产品列表</span></button>
                                </div>*@
                            <a href="#" binding="{'productId':'Id'}" onclick="$.MGJ.ProductList.Dialog_EditList(this)">编辑</a>
                            <a href="#" binding="{'productId':'Id'}" onclick="$.MGJ.ProductList.Ajax_DelProduct(this)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="ProducctPager"></div>
    </div>
</div>

<script>
    $("#StartDate").datepicker({
        format: "yyyy-mm-dd",
        language: 'cn',
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true,
        endDate: new Date()
    }).on('changeDate', function (e) {
        var startTime = e.date;
        $('#EndDate').datepicker('setStartDate', startTime);
    });
    $("#EndDate").datepicker({
        format: "yyyy-mm-dd",
        language: 'cn',
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true,
        endDate: new Date()
    }).on('changeDate', function (e) {
        var endTime = e.date;
        $('#StartDate').datepicker('setEndDate', endTime);
    });

    var ColspanNub = $(".table.table-hover.table-bordered").find("tr").children("td").length
    window.User_EmptyHtml = '<tr><td colspan="' + ColspanNub + '"><p class="no-result">无符合条件的数据结果</p></td></tr>';

    $(function () {
        $.MGJ.ProductList.Ajax_GetProductList(1);
    });

    $('#SearchForm').bootstrapValidator({
        fields: {
            Productid: {
                validators: {
                    regexp: {
                        regexp: /^[a-zA-Z0-9]*$/,
                        message: '产品编号只能为字母和数字'
                    }
                }
            },
            CheckStatus: {
                validators: {
                    regexp: {
                        regexp: /^[a-zA-Z0-9\u4e00-\u9fa5]+$/,
                        message: '产品名称不能输入符号'
                    }
                }
            }
        }
    })
</script>